<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="/WEB-INF/struts-tags.tld" prefix="s"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>喜乐康智能家居系统</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript">
		var deviceSize = <s:property value="openDeviceList.size()"/>;
		var deviceOpenPage = Math.ceil(<s:property value="openDeviceList.size()"/>/18);
		deviceOpenPage = (deviceOpenPage==0?1:deviceOpenPage);
		var deviceCurrentPage = 1;
		function deviceOpenUp(upDown){
			if(deviceCurrentPage == 1) return ;
			if(upDown=='down'){
				$(".main_right_device_up").css("background-image","url('<%=basePath%>resource/main_device_up_press.png')");
			}else if(upDown=='up'){
				deviceCurrentPage-=1;
				for(var i=1;i<=deviceSize;i++){
					var startId = (deviceCurrentPage-1) * 18 ;
					var endId = (deviceCurrentPage-1) * 18 + 18;
					if(i > startId && i <= endId){
						$("#main_right_device_text_d_li"+i).css("display","block");
					}else{
						$("#main_right_device_text_d_li"+i).css("display","none");
					}
				}
				$(".main_right_device_up").css("background-image","url('<%=basePath%>resource/main_device_up.png')");
			}
		}

		function deviceOpenDown(upDown){
			if(deviceCurrentPage == deviceOpenPage) return ;
			if(upDown=='down'){
				$(".main_right_device_down").css("background-image","url('<%=basePath%>resource/main_device_down_press.png')");
			}else if(upDown=='up'){
				deviceCurrentPage+=1;
				for(var i=1;i<=deviceSize;i++){
					var startId = (deviceCurrentPage-1) * 18 ;
					var endId = (deviceCurrentPage-1) * 18 + 18;
					if(i > startId && i <= endId){
						$("#main_right_device_text_d_li"+i).css("display","block");
					}else{
						$("#main_right_device_text_d_li"+i).css("display","none");
					}
				}
				$(".main_right_device_down").css("background-image","url('<%=basePath%>resource/main_device_down.png')");
			}
		}
	</script>
  </head>
  
  <body class="main_body">
   	<div class="main_right_device">
   		<div class="main_right_device_text">
   			<div id="main_right_deviceTime" style="font-size: 12px;padding-top: 20px;margin-top: 10px;">
   			</div>
   			<script type="text/javascript">
	   			var testDate = new Date();
	   	 		var testStr = testDate.format("yyyy年MM月dd日hh时mm分");
	   			$("#main_right_deviceTime").text("查询时间："+testStr);
	   		</script>
   			<div class="main_right_device_text_d">
   				<ul>
   					<s:iterator id="device" value="openDeviceList" status="status">
   						<li id="main_right_device_text_d_li<s:property value="#status.index+1" />"
	   						<s:if test="#status.index+1 > 18">
	   							style="display:none;"
	   						</s:if>	
   						>-<s:property value="roomName"/>[<s:property value="deviceName"/>]开启</li>
   					</s:iterator>
   					
				</ul>
   			</div>
			<div style="width: 210px;height: 50px;">
				<div class="main_right_device_up"  onmousedown="deviceOpenUp('down')" onmouseup="deviceOpenUp('up')"></div>
				<div class="main_right_device_down" onmousedown="deviceOpenDown('down')" onmouseup="deviceOpenDown('up')"></div>
			</div>
		</div>
		
		<div class="main_right_device_button" onmouseup="queryDevice('up')" onmousedown="queryDevice('down')">
			<div class="main_right_device_query_img"></div>
			<div class="main_right_device_query_text">
				当前运行设备查询
			</div>
		</div>
	</div>
  </body>
</html>
